<template>
    <el-dialog v-model="show" title="对账" width="20%" align-center @close="handleClose">

        <el-row>
            <el-col class="flex" :span="24">
                <div class="label">
                    客户名称：
                </div>
                <div>{{ props.initList.customerName }}</div>
            </el-col>
            <el-col class="flex" :span="24">
                <div class="label">
                    所属子公司：
                </div>
                <div>{{ props.initList.companyName }}</div>
            </el-col>
            <el-col class="flex" :span="24">
                <div class="label">
                    对账日期：
                </div>
                <div>{{ dateTime }}</div>
            </el-col>
            <el-col class="flex mb10" :span="24">
                <div class="label">
                    收款金额：
                </div>
                <div>￥{{ props.initList.saleAmount }}</div>
            </el-col>
        </el-row>

        <el-form ref="formRef" :model="form" label-width="100px">
            <el-form-item label="对账金额：" :rules="[
                { required: true, message: '请输入对账金额' },
                { type: 'number', min: 0, message: '对账金额只能是数字' },
            ]" prop="reconciliationAmount">
                <el-input v-model.number="form.reconciliationAmount" placeholder="请输入对账金额" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit(formRef)">确 认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { salesReconciliationApi } from '@/api/sj/financialManagement/salesReconciliation'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);
const dateTime = ref('');
const formRef = ref();

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const form = reactive({
    reconciliationAmount: '',
});

const handleSubmit = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            try {
                const { code } = await salesReconciliationApi({
                    ...form,
                    companyId: props.initList.companyId,
                    customerId: props.initList.customerId,
                    customerName: props.initList.customerName,
                    collectAmount: props.initList.saleAmount,
                    id: props.initList.id
                })

                if (code == 200) {
                    proxy?.$modal.msgSuccess('操作成功');
                    emits('submit', true);

                    handleClose();
                }
            } catch (error) {

            }

        } else {
            console.log('error submit!')
        }
    })
}


const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};

onMounted(() => {
    const date = new Date();
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
    const day = String(date.getDate()).padStart(2, '0'); // 补零
    dateTime.value = `${year}-${month}-${day}`;
})
</script>

<style lang="scss" scoped>
.label {
    height: 32px;
    line-height: 32px;
    font-weight: 700;
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
    width: 100px;
}

.flex {
    display: flex;
    align-items: center;
}
</style>